<template>
	<svg id="_luo-svg_" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="500">
		<defs id="MATERIAL">
			<filter id="SourceGraphicBlurFilter_0" x="0" y="0" width="200%" height="200%">
				<feOffset result="offOut" in="SourceGraphic" dx="50" dy="50" />
				<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
				<feColorMatrix result="matrixOut" in="blurOut" type="matrix" values="0.2 0 0 0 0 0 .5 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
				<feBlend in="SourceGraphic" in2="matrixOut"></feBlend>
			</filter>
			
			<symbol id="M_test_0" viewBox="0 0 1000 1000">
				<rect width="1000" height="1000"></rect>
			</symbol>
			
			<filter id="MATERIAL_dropshadow" filterUnits="userSpaceOnUse" x="-40" y="-40" width="200%" height="200%">
				<feDropShadow dx="0" dy="0" stdDeviation="20"></feDropShadow>
			</filter>
			
			<filter id="MATERIAL_specularLighting" x="0" y="0" width="100%" height="100%">
				<feSpecularLighting in="SourceGraphic" result="light" specularExponent="20" lighting-color="#fff">
					<fePointLight x="100" y="100" z="50"></fePointLight>
					<animate attributeName="specularExponent" values="20;80;20" begin="0s;" dur="5s" restart="whenNotActive" repeatCount="indefinite" fill="freeze"></animate>
				</feSpecularLighting>
				<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
			</filter>
		</defs>
		
		<g id="VIEW">
			<g id="VIEW_GROUP" :transform="`translate(${content.x}, ${content.y})scale(${content.scale})`">
				<use xlink:href="#M_test_0" x="150" y="50" width="100" height="100" fill="#6cf" filter="url(#SourceGraphicBlurFilter_0)"></use>
				
				<use xlink:href="#M_test_0" x="300" y="100" width="100" height="100" fill="#6cf" filter="url(#MATERIAL_dropshadow)"></use>
				
				<use xlink:href="#M_test_0" x="350" y="250" width="200" height="200" fill="#6cf" filter="url(#MATERIAL_specularLighting)"></use>
			</g>
			
			<svg id="VIEW_MASK" x="0" y="0" width="100%" height="100%">
				<defs>
					<radialGradient id="VIEW_MASK_D_visionGradient_0" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" fr="36%">
						<stop offset="0%" stop-color="#000"></stop>
						<stop offset="100%" stop-color="#fff"></stop>
						<animate attributeName="fr" additive="sum" values="0%;2%;0%" dur="5s" restart="whenNotActive" repeatCount="indefinite"></animate>
					</radialGradient>
					
					<filter id="VIEW_MASK_D_specularLighting_0" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
						<feSpecularLighting result="light0" surfaceScale="1" specularExponent="160" specularConstant="80" lighting-color="#fff">
							<fePointLight x=".5" y=".5" z=".6"></fePointLight>
						</feSpecularLighting>
						<feComposite in="SourceGraphic" in2="light0" result="composite0" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
						<feColorMatrix 
							in="composite0" 
							type="matrix" 
							values="-1 0 0 0 1 
											0 -1 0 0 1 
											0 0 -1 0 1
											0 0 0 1 0"
						/>
					</filter>
								
					<mask id="VIEW_MASK_D_vision_0">
						<rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
						<circle cx="50%" cy="50%" r="50%" fill="url(#VIEW_MASK_D_visionGradient_0)">
							<animate attributeName="r" additive="sum" values="-2%;2%;-2%" begin="0s;" dur="5s" restart="whenNotActive" repeatCount="indefinite" fill="freeze"></animate>
						</circle>
					</mask>
					
					<mask id="VIEW_MASK_D_vision_1">
						<rect x="0" y="0" width="100%" height="100%" fill="#000" filter="url(#VIEW_MASK_D_specularLighting_0)"></rect>
					</mask>
				</defs>
				
				<!-- <rect x="0" y="0" width="100%" height="100%" fill="#000" mask="url(#VIEW_MASK_D_vision_0)"></rect> -->
				
				<rect x="0" y="0" width="100%" height="100%" fill="#000" mask="url(#VIEW_MASK_D_vision_1)"></rect>
			</svg>
		</g>
		
		<g id="ACTION"></g>
	</svg>
</template>

<script setup>
	import { 
		ref, unref, reactive, watch, computed, 
		onMounted, onBeforeUnmount, getCurrentInstance, onBeforeUpdate, onUpdated ,
	} from 'vue';
	
	const content = reactive({
		active: false,
		x: 0,
		y: 0,
		scale: 1,
		xyStep: 10,
		scaleStep: 0.1,
		xLimit: [-1000, 1000],
		yLimit: [-1000, 1000],
		scaleLimit: [0.2, 4],
		direction: null
	})
	
	function contentActHandle(e) {
		e.stopPropagation();
		if (e.type === 'keydown') {
			const distance = e.altKey ? 1 : content.xyStep;
			switch(e.code) {
				case 'KeyP':
					content.active = e.altKey && !e.repeat && !content.active;
					content.direction = null;
					break;
				case 'ArrowUp':
					content.active && content.y > content.yLimit[0] && (content.y = Math.max(content.yLimit[0], content.y - distance));
					content.direction = 'up';
					break;
				case 'ArrowDown':
					content.active && content.y < content.yLimit[1] && (content.y = Math.min(content.yLimit[1], content.y + distance));
					content.direction = 'down';
					break;
				case 'ArrowLeft':
					content.active && content.x > content.xLimit[0] && (content.x = Math.max(content.yLimit[0], content.x - distance));
					content.direction = 'left';
					break;
				case 'ArrowRight':
					content.active && content.x < content.xLimit[1] && (content.x = Math.min(content.yLimit[1], content.x + distance));
					content.direction = 'right';
					break;
			}
		} else if (e.type === 'wheel' && content.active) {
			if (e.wheelDelta > 0) {
				content.scale = Math.max(content.scaleLimit[0], content.scale - content.scaleStep);
			} else {
				content.scale = Math.min(content.scaleLimit[1], content.scale + content.scaleStep);
			}
		}
	}
	
	onMounted(() => {
		window.addEventListener('keydown', contentActHandle, { passive: true });
		window.addEventListener('wheel', contentActHandle, { passive: true });
	})
	
	onBeforeUnmount(() => {
		window.removeEventListener('keydown', contentActHandle);
		window.removeEventListener('wheel', contentActHandle);
	})
</script>

<style lang="scss">
	#_luo-svg_ {
		filter: drop-shadow(0 0 10px #4c4c4c);
		border-radius: 6px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, .8)), center/cover no-repeat url('./source/image/bgImg$0.jpg');
	}
</style>